<template>
	<view class="user clearfix  hv100 ">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">付款</block>
		</cu-custom>
		<view class="paylines"></view>
		<view class="flex align-center  bg-white px15 ">
			<view class="py10">付款金额</view>
			<text class="fwb f26 ml20">￥{{money}}</text>
		</view>
		<view class="por share-qrpic discenter" v-if="money!=''&&money!=0">
			<image class="share-qrpics" :src="qrcodeImg"></image>
		</view>
		<view class="qrcodehidden">
			<tkiQrcod cid="qrcode" 
			@result="result" 
			ref="qrinfos" 
			:val="qrinfos" 
			onval 
			:size="420" 
			:showLoading="false" 
			/></view>
		<view class="red-button discenter" @click="toqrcode">保存二维码</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import tkiQrcod from 'tki-qrcode'
export default {
	components: { tkiQrcod },
	data() {
		return {
			logId:'',
			type:'',
			money:'',
			qrcodeImg:'',
			qrinfos:''
		}
	},
	onLoad(e) {
		this.logId=e.logId 
		this.type=e.type 
		this.money=e.money
		this.getData()
	},
	methods: {
		toqrcode(){
			uni.saveImageToPhotosAlbum({
				filePath: this.qrcodeImg,
				success: function () {
					uni.showToast({
						title:'保存成功',
						icon:'success'
					})
				}
			});
		},
		async getData() {
			setTimeout(()=>{
				this.qrinfos='logId='+this.logId+'&type='+this.type+'&money='+this.money
			},500)
		},
		//这里二维码
		result(e) {
			this.qrcodeImg = e
		},
	}
}
</script>

<style lang="less">
page{
	background-color: #FFFFFF;
}
.payline{
	width: 100%;
	height: 2rpx;
	background-color: #F2F2F2;
}
.paylines{
	width: 100%;
	height: 10rpx;
	background-color: #F2F2F2;
}
.red-button{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 90rpx;
	border-radius: 10rpx;
	background-color: #D73329;
	color: #FFFFFF;
	margin-top:150rpx ;
}
.qrmargin{
	margin-top: calc(50vh + var(--status-bar-height) - 200rpx);
	margin-left: calc(50% - 135rpx);
} 
.share-text{
	width: 680rpx;
	height: 216rpx;
	margin-left: calc(50% - 340rpx);
	margin-top: 40rpx;
}
.share-box{
	width: 720rpx;
	height: 720rpx;
	position: absolute;
	bottom: 34rpx;
	left: 15rpx;
}
.share-bix{
	width: 720rpx;
	height: 720rpx;
	position: absolute;
}
.qrtext{
	color: #FF0E0E;
}
.qrbutton{
	width: 300rpx;
	height: 80rpx;
	border-radius: 10rpx;
	position: fixed;
	z-index: 1;
	bottom: 80rpx;
	right: calc(50% - 150rpx);
	color: #F83632;
}
.share-qrpic{
	margin-top: 150rpx;
	margin-left: calc(50% - 210rpx);
	width: 420rpx;
	height: 420rpx;
	background-color: #FFFFFF;
}
.button-share{
	background-color: #F3DD64;
	color: #DA0E17;
	position: relative;
	z-index: 1;
	width: 360rpx;
	height: 80rpx;
	border-radius: 60rpx;
	margin-top: 60rpx;
}
.button-shares{
	background-color: #F3DD64;
	color: #DA0E17;
	position: relative;
	z-index: 1;
	width: 120rpx;
	height: 60rpx;
	border-radius: 60rpx;
}
.share-qrpics{
	width: 420rpx;
	height: 420rpx;
}
.por{
	position: relative;
}
.fx-bg{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
}
.block135{
	width: 270rpx;
	height: 270rpx;
	background-color: #FFFFFF !important;
}
.share-end{
	position: fixed;
	bottom: 75rpx;
	width: 650rpx;
	left: calc(50% - 325rpx);
}
.block130{
	width: 220rpx;
	height: 220rpx;
}
.share-button{
	background-color: #FFFFFF;
	width: 300rpx;
	height: 80rpx;
	border-radius: 10rpx;
}
.nshare{
	width: 300rpx;
	height: 80rpx;
	border-radius: 10rpx;
}
.copy-button{
	width: 116rpx;
	height: 52rpx;
	background-color: #FFD700;
	color: #000000;
}
.yq-box{
	width: calc(100% - 200rpx);
}
.share { 
	&-title {
		width: 320rpx;
		height: 130rpx;
	}
	&-content {
		height: 754rpx;
		width: 660rpx;
		//background: url('~@/static/user/con_share@2x.png') no-repeat;
		background-size: 100% 100%;
		.share-code {
			height: 150rpx;
			margin-top: 50rpx;
		}
		.qrcode {
			&-img {
				display: block;
				width: 300rpx;
				height: 300rpx;
			}
			&-hidden {
				width: 0;
				height: 0;
				overflow: hidden;
			}
		}
	}

	
}
.qrcodehidden{
	width: 0;
	height: 0;
	overflow: hidden;
}
.share-card{
	position: relative;
	width: 100%;
	height: 310rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
}
</style>
